import Header from "@/components/Header";
import api from "@/pages/data-collect/data-source/api";
import HttpUtils from "@/utils/HttpUtils";
import { ArrowLeftOutlined, InfoCircleOutlined } from "@ant-design/icons";
import { Col, message, notification, Row } from "antd";
import { Button, Form, Input, Select } from "knowdesign";
import TextArea from "knowdesign/lib/basic/input/TextArea";
import { useEffect, useState } from "react";
import metaApi from "../../api";
import ColumnMapping from "./components/ColumnMapping";
import Channel from "./components/ColumnMapping/Channel";
import HeaderLine from "./components/HeaderLine";
import SampleModal from "./components/SampleModal";
import "./index.less";

const App = ({ setStep, setDetail }) => {
  const [form] = Form.useForm();
  const [formReader] = Form.useForm();

  const [dsList, setDsList] = useState([]);
  const [tableList, setTableList] = useState([]);
  const [sampleData, setSampleData] = useState({});
  const [sampleVisisbal, setSampleVisisbal] = useState(false);

  const getTables = (datasourceId: string) => {
    HttpUtils.get(metaApi.getTable + "?datasourceId=" + datasourceId).then(
      (data) => {
        if (data?.code === 200) {
          const res = data?.data?.map((item) => {
            return {
              label: item,
              value: item,
            };
          });
          formReader.setFieldsValue({
            tableName: res?.[0]?.label || "",
          });
          setTableList(res);
        }
      }
    );
  };

  useEffect(() => {
    HttpUtils.post(api.sourceAll, {
      dsType: "MySQL",
    }).then((data) => {
      if (data?.code === 200) {
        const res = data?.data?.map((item) => {
          return {
            label: item?.dbName,
            value: item?.id,
          };
        });
        formReader.setFieldsValue({
          dsType: "MySQL",
          databaseSourceId: res?.[0]?.value || "",
        });

        setDsList(res);
        getTables(res?.[0]?.value);
      }
    });
  }, []);

  const onFinishReader = () => {
    formReader.validateFields().then((formData) => {
      HttpUtils.post(metaApi.getSample, { ...formData }).then((data) => {
        if (data?.code === 200) {
          console.log(data);
          setSampleVisisbal(true);
          setSampleData(data?.data);
        } else {
          notification.error({
            message: "错误提示",
            description: data?.message,
          });
        }
      });
    });
  };

  const getTableList = (value) => {
    console.log(value);
  };

  return (
    <>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
        }}
      >
        <Header title={"配置数据来源与去向"} />

        <div>
          <Button
            // type="primary"
            shape="round"
            icon={<ArrowLeftOutlined style={{ paddingLeft: 8 }} />}
            size="small"
            onClick={() => {
              setStep(1);
            }}
            style={{ padding: "0 8px" }}
          >
            返回&nbsp;&nbsp;&nbsp;&nbsp;
          </Button>
        </div>
      </div>

      <div
        style={{
          border: "1px solid rgba(0,0,0,0.14)",
          borderRadius: 8,
          marginTop: 24,
          padding: "16px 8px",
        }}
      >
        <HeaderLine sNumber="01" sSource="选择数据源" />
        <Row justify="space-evenly" style={{ marginTop: "46px" }}>
          <Col span={11}>
            <div style={{ height: "auto" }}>
              <div className="dc-wfw-form-custom">
                <Form
                  form={formReader}
                  layout="vertical"
                  onFinish={onFinishReader}
                >
                  <Row justify="space-between">
                    <Col span={11}>
                      <Form.Item
                        name="dsType"
                        label="数据源"
                        rules={[{ required: true, message: "数据源不能为空" }]}
                        tooltip={{
                          title: "Tooltip with customize icon",
                          icon: <InfoCircleOutlined />,
                        }}
                      >
                        <Select
                          style={{ width: "100%" }}
                          size="small"
                          options={[
                            {
                              label: "MySQL",
                              value: "MySQL",
                            },
                          ]}
                          // disabled
                        />
                      </Form.Item>
                    </Col>
                    <Col span={11}>
                      <Form.Item
                        name="databaseSourceId"
                        label="数据库"
                        rules={[{ required: true, message: "数据库不能为空" }]}
                        tooltip={{
                          title: "Tooltip with customize icon",
                          icon: <InfoCircleOutlined />,
                        }}
                      >
                        <Select
                          style={{ width: "100%" }}
                          size="small"
                          options={dsList}
                          onChange={getTableList}
                        />
                      </Form.Item>
                    </Col>
                  </Row>

                  <Form.Item
                    name="tableName"
                    label="数据表"
                    rules={[{ required: true, message: "数据表不能为空" }]}
                    tooltip={{
                      title: "Tooltip with customize icon",
                      icon: <InfoCircleOutlined />,
                    }}
                  >
                    <Select
                      style={{ width: "100%" }}
                      size="small"
                      options={tableList}
                      filterOption={(input, option) =>
                        ((option?.label as string) ?? "")
                          ?.toLowerCase()
                          .includes(input?.toLowerCase())
                      }
                      showSearch
                    />
                  </Form.Item>

                  <Form.Item
                    name="dataFilter"
                    label="数据过滤"
                    rules={[{ required: false }]}
                    tooltip={{
                      title: "Tooltip with customize icon",
                      icon: <InfoCircleOutlined />,
                    }}
                  >
                    <TextArea
                      style={{ width: "100%", height: 90 }}
                      size="small"
                      maxLength={1000}
                      showCount
                    />
                  </Form.Item>

                  <Form.Item
                    name="querySql"
                    label="查询SQL"
                    rules={[{ required: false }]}
                    tooltip={{
                      title: "Tooltip with customize icon",
                      icon: <InfoCircleOutlined />,
                    }}
                  >
                    <TextArea
                      style={{ width: "100%", height: 90 }}
                      size="small"
                      maxLength={1000}
                      showCount
                      placeholder="join的时候用，优先级大于table where"
                    />
                  </Form.Item>

                  <Form.Item
                    name="splitKey"
                    label="切分键"
                    rules={[{ required: false }]}
                    tooltip={{
                      title: "Tooltip with customize icon",
                      icon: <InfoCircleOutlined />,
                    }}
                  >
                    <Input style={{ width: "100%" }} size="small" />
                  </Form.Item>

                  <Form.Item>
                    <Button
                      type="primary"
                      htmlType="submit"
                      style={{ width: "100%" }}
                      ghost
                    >
                      数据预览
                    </Button>
                  </Form.Item>
                </Form>
              </div>
            </div>
          </Col>
          <Col span={11}>
            <div style={{ height: "auto" }}>
              <div className="dc-wfw-form-custom">
                <Form form={form} layout="vertical" name="test">
                  <Form.Item
                    name="dataSource"
                    label="数据源"
                    rules={[{ required: true }]}
                    tooltip={{
                      title: "Tooltip with customize icon",
                      icon: <InfoCircleOutlined />,
                    }}
                  >
                    <Row justify="space-between">
                      <Col span={11}>
                        <Select style={{ width: "100%" }} size="small" />
                      </Col>
                      <Col span={11}>
                        <Select style={{ width: "100%" }} size="small" />
                      </Col>
                    </Row>
                  </Form.Item>

                  <Form.Item
                    name="table"
                    label="表"
                    rules={[{ required: true }]}
                    tooltip={{
                      title: "Tooltip with customize icon",
                      icon: <InfoCircleOutlined />,
                    }}
                  >
                    <Select style={{ width: "100%" }} size="small" />
                  </Form.Item>

                  <Form.Item
                    name="preWriteSql"
                    label="导入前准备语句"
                    rules={[{ required: false }]}
                    tooltip={{
                      title: "Tooltip with customize icon",
                      icon: <InfoCircleOutlined />,
                    }}
                  >
                    <TextArea
                      style={{ width: "100%", height: 90 }}
                      size="small"
                      maxLength={1000}
                      showCount
                    />
                  </Form.Item>

                  <Form.Item
                    name="postWriteSql"
                    label="导入后准备语句"
                    rules={[{ required: false }]}
                    tooltip={{
                      title: "Tooltip with customize icon",
                      icon: <InfoCircleOutlined />,
                    }}
                  >
                    <TextArea
                      style={{ width: "100%", height: 90 }}
                      size="small"
                      maxLength={1000}
                      showCount
                    />
                  </Form.Item>

                  <Form.Item
                    name="writeModal"
                    label="写入模式"
                    rules={[{ required: true }]}
                    tooltip={{
                      title: "Tooltip with customize icon",
                      icon: <InfoCircleOutlined />,
                    }}
                  >
                    <Select style={{ width: "100%" }} size="small" />
                  </Form.Item>
                </Form>
              </div>
            </div>
          </Col>
        </Row>
        <HeaderLine sNumber="02" sSource="字段映射" />

        <ColumnMapping />
        <HeaderLine sNumber="03" sSource="通道配置" />
        <Channel />
      </div>

      <div className="dc-ui-pro-step-footer">
        <div className="dc-ui-pro-step-footer-main">
          <Button
            size="small"
            type="primary"
            onClick={() => {
              setDetail(false);
            }}
          >
            完成
          </Button>
        </div>
      </div>

      <SampleModal
        sampleData={sampleData}
        sampleVisisbal={sampleVisisbal}
        setSampleVisisbal={setSampleVisisbal}
      />
    </>
  );
};

export default App;
